<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>
    <meta charset="UTF-8"/>
    <title>证件办理进度</title>

    <link rel="stylesheet" href="/css/weui.css"/>
    <link rel="stylesheet" href="/css/main.css"/>


    <script src="/js/vue.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script th:utext="${progressListJson}"></script>

    <style>
        body {
            background-color: #f0f0f0;
        }

        .progress {
            background: white;
            box-shadow: 0 1px 2px 1px rgba(51, 51, 51, 0.07);
            margin: 10px;

        }

        .progress_row {
            height: 11vw;
            padding: 0 18px;
            display: flex;
            flex-direction: row;
        }

        .progress_title {
            font-size: 18px;
            font-size: 18 px;
            color: #000068;
            line-height: 11vw;
        }

        .progress_item {
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .progress_item_title {
            flex: 1;
            font-size: 12px;
            font-size: 12 px;
            color: #000068;
            display: flex;
            flex-direction: column;
        }

        .progress_item_value {
            flex: 2;
            font-size: 16x;
            font-size: 16 px;
            color: #333333;
            display: flex;
            flex-direction: column;
        }

        .hidden_div {
            display: none;
        }

        .progress_map {
            padding: 0 0 10px 15px;
        }

        .progress_node {
            height: 8vw;
            display: flex;
            flex-direction: row;
        }

        .progress_node_icon {
            height: 8vw;
            width: 8vw;
            background-size: cover;
        }

        .progress_node_on .progress_node_icon {
            height: 8vw;
            width: 8vw;
            background: url("/images/progress1.jpg") no-repeat;
            background-size: cover;
        }

        .progress_node_on .progress_node_text {
            color: #000068;
            display: flex;
            justify-content: left;
            align-items: center;
            flex-direction: row;
        }

        .progress_node_off .progress_node_icon {
            height: 8vw;
            width: 8vw;
            background: url("/images/progress2.jpg") no-repeat;
            background-size: cover;
        }

        .progress_node_off .progress_node_text {
            color: #c8c8c8;
            display: flex;
            justify-content: left;
            align-items: center;
        }

        .progress_node_text span {
            margin: 0 0 0 10px;
        }

        .ems_btn {
            color: #000068;
            font-size: 14px;
            font-size: 14 px;
            text-align: center;
            height: 20px;
            border: 2px solid #000068;
            width: 80px;
            border-radius: 3px;
            margin-left: 20px;
        }

        .progress_line {
            height: 5vw;
            display: flex;
            flex-direction: row;
        }

        .progress_line_icon {
            height: 5vw;
            width: 8vw;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .progress_node_on .progress_line_icon div {
            height: 5vw;
            width: 3px;
            background-color: #000068;
        }

        .progress_node_off .progress_line_icon div {
            height: 5vw;
            width: 3px;
            background-color: #c8c8c8;
        }

        .progress_line_text {
        }

        .search_container{ display: flex;margin: 10px;flex-direction: row;}
        .input_container{flex: 4;background-color: white;}
        .input_container input{padding-left: 8px;border:1px solid  #aaaaaa;border-right: 0;height: 8vw;line-height: 8vw;width: 98%;border: 0;outline: none;}

        .search_btn{flex: 1;background-color: #1876ce;color: white;height: 100%;line-height: 8vw;text-align: center;}

    </style>
</head>
<body>
<div id="app">

    <div class="search_container">
        <div class="input_container">
            <input v-model="keyword" placeholder="请输入您要查询的业务编号" />
        </div>
        <div class="search_btn" v-on:click="doQuery();">查询</div>
    </div>

    <div class="progress"
         v-for="p in progressList">
        <div class="progress_row progress_title">
            {{p.paperTypeName}}
        </div>
        <div class="progress_row">
            <div class="progress_item">
                <span class="progress_item_title">业务编号</span>
                <span class="progress_item_value">{{p.ywbh}}</span>
            </div>
        </div>
        <div class="progress_row">
            <div class="progress_item">
                <span class="progress_item_title">受理日期</span>
                <span class="progress_item_value">{{p.slrqName}}</span>
            </div>
        </div>
        <div style="display:flex;flex-direction: column;padding: 0 18px;">
            <span style="height: 8vw;line-height: 8vw;font-size: 14px;font-size: 14 px;color: #000068;">办理进度</span>
            <div class="progress_map">
                <div v-bind:class="['progress_node',{'progress_node_on':p.stepGt1},{'progress_node_off':p.stepLt1}]">
                    <div class="progress_node_icon"></div>
                    <div class="progress_node_text"><span>业务受理</span></div>
                </div>

                <div v-bind:class="['progress_line',{'progress_node_on':p.stepGt2},{'progress_node_off':p.stepLt2}]">
                    <div class="progress_line_icon">
                        <div></div>
                    </div>
                    <div class="progress_line_text"></div>
                </div>
                <div v-bind:class="['progress_node',{'progress_node_on':p.stepGt2},{'progress_node_off':p.stepLt2}]">
                    <div class="progress_node_icon"></div>
                    <div class="progress_node_text"><span>信息审核</span></div>
                </div>

                <div v-bind:class="['progress_line',{'progress_node_on':p.stepGt3},{'progress_node_off':p.stepLt3}]">
                    <div class="progress_line_icon">
                        <div></div>
                    </div>
                    <div class="progress_line_text"></div>
                </div>
                <div v-bind:class="['progress_node',{'progress_node_on':p.stepGt3},{'progress_node_off':p.stepLt3}]">
                    <div class="progress_node_icon"></div>
                    <div class="progress_node_text"><span>证件制作中</span></div>
                </div>

                <div v-bind:class="['progress_line',{'progress_node_on':p.stepGt4},{'progress_node_off':p.stepLt4}]">
                    <div class="progress_line_icon">
                        <div></div>
                    </div>
                    <div class="progress_line_text"></div>
                </div>

                <div v-bind:class="[{'progress_node':p.stepLt4},{'hidden_div':p.stepGt4},{'progress_node_off':p.stepLt4}]">
                    <div class="progress_node_icon"></div>
                    <div class="progress_node_text"><span>证件发放</span></div>
                </div>

                <div v-bind:class="[{'progress_node':p.stepEq4},{'hidden_div':p.stepNe4},{'progress_node_on':p.stepEq4}]">
                    <div class="progress_node_icon"></div>
                    <div class="progress_node_text"><span>EMS已寄出</span>
                        <div class="ems_btn" onclick="show404();">快递查询</div>
                    </div>
                </div>
                <div v-bind:class="[{'progress_node':p.stepEq5},{'hidden_div':p.stepNe5},{'progress_node_on':p.stepEq5}]">
                    <div class="progress_node_icon"></div>
                    <div class="progress_node_text"><span>证件发往受理机关</span></div>
                </div>


            </div>
        </div>
        <div v-bind:class="['progress_row',{'hidden_div':p.emsdh==''}]">
            <div class="progress_item">
                <span class="progress_item_title">EMS单号</span>
                <span class="progress_item_value">{{p.emsdh}}</span>
            </div>
        </div>


    </div>
    <div v-bind:class="['weui-loadmore',{'weui-loadmore_line':!inQuery},{'hidden_div':loadMoreDisplay}]">
        <i v-bind:class="['weui-loading',{'hidden_div':!inQuery}]"></i>
        <span class="weui-loadmore__tips" style="background-color: transparent;" id="data_tips">{{dataTips}}</span>
    </div>

</div>
<div class="js_dialog" id="iosDialog" style="display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__bd" id="dialogContent">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
        <div class="weui-dialog__ft">
            <a href="javascript:hideDialog();" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
        </div>
    </div>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            progressList: [],
            keyword:"",
            queryFlag:false,
            inQuery:false,
            queryOnce:false
        },
        created: function () {

        },
        computed: {
            loadMoreDisplay: function () {
                if(!this.queryOnce)
                {
                    return true;
                }
                return this.progressList.length != 0;
            }
            ,dataTips:function () {
                if (this.inQuery)
                {
                    return '正在加载';
                }
                else {
                    return '未查询到数据';
                }
            }
        },
        method:{

        }
    });

    function doQuery() {
        app.progressList = [];
        app.queryOnce = true;
        app.inQuery = true;
        $.post("/paper/queryProgress",{ywbh:app.keyword},function (res) {
            app.progressList = res;
            app.inQuery = false;
        });
    }

</script>
</body>
</html>